<template>
  <div class="echarts-outer-wrapper flex-cloumn width-620">
    <Title title="税务登记(分单位)" time="2"></Title>
    <div class="echart-tab-wrapper">
      <div class="tabs">
        <div
          class="tab-item"
          :class="{ select: tabIndex === index }"
          v-for="(item, index) in tabList"
          :key="index"
          @click="changeTab(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="legend">
      <div class="legend-item" v-for="(item, index) in legend" :key="index">
        <img v-if="index === 0" src="@/assets/images/echart-legend-11.png" />
        <img v-if="index === 1" src="@/assets/images/echart-legend-12.png" />
        <img v-if="index === 2" src="@/assets/images/echart-legend-13.png" />
        <img v-if="index === 3" src="@/assets/images/echart-legend-14.png" />
        {{ item }}
      </div>
    </div>
    <div ref="echarts" class="flex1"></div>
  </div>
</template>
<script>
const KeyValue = ["yxList", "dwList", "gtList", "xbList", "zxList", "fzcList"];
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";
import * as echarts from "echarts";

export default {
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: null, // 图表数据
      tabList: ["有效", "单位", "个体", "新办", "注销", "非正常"],
      tabIndex: 0,
      legend: [],
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.echarts);
    this.ajax({
      url: "/dpzsDjcxService/swdjFdwQuery",
      method: "post",
      data: {
        param: {
          swjg: this.$route.query.qx_swjg_dm,
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      this.changeTab(this.tabIndex);
    });
  },
  methods: {
    changeTab(index) {
      this.myChart.clear();
      this.tabIndex = index;
      let allData = {
        xdata: [],
        data: [],
      };
      let currentData = this.EchartData[KeyValue[this.tabIndex]];
      let xdata = [];
      let zchdata = {
        name: "正常户",
        data: [],
      }; // 正常
      let fzchdata = {
        name: "非正常户",
        data: [],
      }; // 非正常
      let qshdata = {
        name: "清算户",
        data: [],
      }; // 清算
      let zhcdata = {
        name: "总户数",
        data: [],
      }; // 总户数
      let tyhdata = {
        name: "停业户",
        data: [],
      }; // 停业户
      let dwnsrdata = {
        name: "单位纳税人",
        data: [],
      }; // 单位纳税人数量
      let gtgshdata = {
        name: "个体工商",
        data: [],
      }; // 个体工商数量
      let lsswdjdata = {
        name: "临时税务登记",
        data: [],
      }; // 临时税务登记数量
      let rddata = {
        name: "认定数量",
        data: [],
      }; // 认定数量
      let ljrddata = {
        name: "累计认定",
        data: [],
      }; // 累计认定
      let jcdata = {
        name: "解除数量",
        data: [],
      }; // 解除数量
      let ljjcdata = {
        name: "累计解除",
        data: [],
      }; // 累计解除
      for (let item of currentData) {
        xdata.push(item.swjg);
        if (item.zch >= 0) zchdata.data.push(item.zch);
        if (item.fzch >= 0) fzchdata.data.push(item.fzch);
        if (item.qsh >= 0) qshdata.data.push(item.qsh);
        if (item.zhc >= 0) zhcdata.data.push(item.zhc);
        if (item.tyh >= 0) tyhdata.data.push(item.tyh);
        if (item.dwnsr >= 0) dwnsrdata.data.push(item.dwnsr);
        if (item.gtgsh >= 0) gtgshdata.data.push(item.gtgsh);
        if (item.lsswdj >= 0) lsswdjdata.data.push(item.lsswdj);
        if (item.rd >= 0) rddata.data.push(item.rd);
        if (item.ljrd >= 0) ljrddata.data.push(item.ljrd);
        if (item.jc >= 0) jcdata.data.push(item.jc);
        if (item.ljjc >= 0) ljjcdata.data.push(item.ljjc);
      }
      allData.xdata = xdata;
      if (zchdata.data.length !== 0) {
        allData.data.push(zchdata);
      }
      if (fzchdata.data.length !== 0) {
        allData.data.push(fzchdata);
      }
      if (qshdata.data.length !== 0) {
        allData.data.push(qshdata);
      }
      if (tyhdata.data.length !== 0) {
        allData.data.push(tyhdata);
      }
      if (dwnsrdata.data.length !== 0) {
        allData.data.push(dwnsrdata);
      }
      if (gtgshdata.data.length !== 0) {
        allData.data.push(gtgshdata);
      }
      if (lsswdjdata.data.length !== 0) {
        allData.data.push(lsswdjdata);
      }
      if (rddata.data.length !== 0) {
        allData.data.push(rddata);
      }
      if (ljrddata.data.length !== 0) {
        allData.data.push(ljrddata);
      }
      if (jcdata.data.length !== 0) {
        allData.data.push(jcdata);
      }
      if (ljjcdata.data.length !== 0) {
        allData.data.push(ljjcdata);
      }
      if (zhcdata.data.length !== 0) {
        allData.data.push(zhcdata);
      }
      this.init(allData);
    },
    init(allData) {
      // Mock数据房山
      let mockData = {
        xdata: allData.xdata,
        result: allData.data,
      };
      const color = [
        [
          { offset: 0, color: "rgba(28,97,255, 0.3)" },
          { offset: 0.5, color: "rgba(28,97,255, 0.8)" },
          { offset: 0.5, color: "rgba(28,97,255, 0.3)" },
          { offset: 1, color: "rgba(28,97,255, 0.8)" },
        ],
        [
          { offset: 0, color: "rgba(66,215,130, 0.3)" },
          { offset: 0.5, color: "rgba(66,215,130, 0.8)" },
          { offset: 0.5, color: "rgba(66,215,130, 0.6)" },
          { offset: 1, color: "rgba(66,215,130, 0.8)" },
        ],
        [
          { offset: 0, color: "rgba(255,0,0, 0.3)" },
          { offset: 0.5, color: "rgba(255,0,0, 0.25)" },
          { offset: 0.5, color: "rgba(255,0,0, 0.3)" },
          { offset: 1, color: "rgba(255,0,0, 0.3)" },
        ],
        [
          { offset: 0, color: "rgba(255,255,0, 0.3)" },
          { offset: 0.5, color: "rgba(255,255,0, 0.25)" },
          { offset: 0.5, color: "rgba(255,255,0, 0.3)" },
          { offset: 1, color: "rgba(255,255,0, 0.3)" },
        ],
      ];
      const color2 = ["#2895C7", "#46286D", "#FF0000aa", "#ffff00aa"];

      // tooltip
      const tooltip = echartOption.tooltip();
      let legendData = allData.data.map((item) => {
        return item.name;
      });
      legendData = legendData.filter((item) => {
        return item !== "总户数";
      });
      this.legend = legendData;
      const grid = echartOption.echartGrid({
        bottom: 40,
      });
      const xAxis = {
        data: mockData.xdata,
        axisTick: echartOption.xAxisTick,
        axisLine: echartOption.xAxisline,
        axisLabel: echartOption.xAxisLabel(),
      };

      // yAxis
      const yAxis = {
        ...echartOption.yAxisDw("户"),
        axisTick: echartOption.yAxisTick,
        axisLine: echartOption.yAxisline,
        splitLine: echartOption.splitLine,
        axisLabel: echartOption.yAxisLabel,
      };
      const diamondData = mockData.result.reduce((pre, cur, index) => {
        pre[index] = cur.data.map(
          (el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0)
        );
        // console.log(pre);
        return pre;
      }, []);
      let series = [];
      for (let i = 0; i < mockData.result.length; i++) {
        if (mockData.result[i].name == "总户数") {
          series.push({
            z: 1,
            type: "pictorialBar",
            symbolPosition: "start",
            data: mockData.result[i].data,
            symbol: "diamond",
            symbolOffset: ["0%", "50%"],
            symbolSize: [24, 10],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                x2: 1,
                y: 0,
                y2: 0,
                colorStops: color[0],
              },
            },
            tooltip: { show: false },
          });
        } else {
          series.push({
            z: i + 2,
            stack: "总量",
            type: "bar",
            name: mockData.result[i].name,
            barGap: "-100%",
            barWidth: 28,
            data: mockData.result[i].data,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                x2: 1,
                y: 0,
                y2: 0,
                colorStops: color[i],
              },
            },
          });
          series.push({
            z: i + 10,
            type: "pictorialBar",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [24, 10],
            data: diamondData[i],
            itemStyle: { color: color2[i] },
            tooltip: { show: false },
          });
        }
      }
      const dataZoom = echartOption.dataZoomBottom();

      let option = {
        tooltip,
        xAxis,
        yAxis,
        series,
        grid,
        dataZoom,
      };
      this.myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts-outer-wrapper {
  width: 614px;
  height: 638px;
}
.legend {
  height: 34px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 130px;
  .legend-item {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 18px;
    margin: 0 12px;
    font-size: 16px;
    img {
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
  }
}
</style>
